<template>
	<Modal v-model="modal" @on-ok="ok('form')" :loading="loading">
		<IForm :model="form" ref="form" :label-width="160" :rules="formRule" >
			<IInput v-model="form.id" class="hide" />
	        <FormItem prop="content" label="短信模版内容">
	            <IInput v-model="form.content" size="large"  type="textarea" :rows="4" placeholder="短信模版内容" />
	        </FormItem>
	        <FormItem prop="config_id" label="短信服务商">
	            <Select v-model="form.config_id">
			        <Option v-for="config in config_ids" :value="config.id" :key="config.id">{{config.desc}}</Option>
			    </Select>
	        </FormItem>
	        <FormItem prop="serviceId" label="服务商模版ID">
	            <IInput v-model="form.serviceId" size="large" placeholder="服务商模版ID" />
	        </FormItem>
	        <FormItem prop="module" label="短信所属模块">
	            <Select v-model="form.module">
			        <Option v-for="module in modules" :value="module.value" :key="module.value">{{module.name}}</Option>
			    </Select>
	        </FormItem>
	    </IForm>
	</Modal>
</template>
<script>
import {Modal,Form,Input,Button, Select, Option, OptionGroup } from 'iview';


export default {
	props:{
        callback:{type:Function}
    },
	components:{
        Modal,
        'IInput' : Input,
		'IForm' : Form,
		'FormItem' : Form.Item,
		'IButton' : Button,
		Select,
		Option,
    },
    data () {
    	const validateQnique=(rule , value ,callback)=>{
    		if(value==''){
    			callback();
    		}
            this.Axios.Config.Sms.Tpl.CheckUniqueModule({id:this.form.id,config_id:this.form.config_id,module:value})
            .then(res =>{
            	if(!res){
            		callback(new Error('已存在相同的短信模版,请更换模块'));
            		return false;
            	}
                callback();
            })
        };
        return {
            modal: false,
            loading : true,
            form :{
            	id : 0,
            	content : '',
            	config_id  : 0,
            	serviceId : '',
            	module : '',
            },
            config_ids : [],
            modules:[],
            formRule : {
                content: [
                    { required: true, message: '请填写模版内容', trigger: 'blur' },
                ],
                config_id: [
                    { required: true, message: '请选择一个短信服务商', trigger: 'blur',type: 'number',min:1 },
                ],
                module : [
                	 { validator: validateQnique, trigger: 'change'}
                ]
            },
        }
    },
    methods: {
        changeLoading(){
            this.loading = false;
            this.$nextTick(() => {
              this.loading = true;
            });
        },
    	ok(name){
    		this.$refs[name].validate(valid => {
    			if (!valid) {this.changeLoading();return false;}
    			this.Axios.Config.Sms.Tpl.Update(this.form)
	            .then(res =>{
	            	this.changeLoading();
	            	if(!res) return false;
	                this.modal = false;
	                this.callback();
	            })
    		})
    	},
    },
    created(){
    	
    },
    watch:{
    	modal(newValue,oldValue){
    		if(!newValue){
    			this.form.id = 0;
    			this.$refs.form.resetFields();
    		}
    	}
    }
}
</script>